<script setup>
import { reactive, ref, watch } from 'vue'
const count = ref(10)
const user = reactive({
  name: 'tom',
  info: {
    gender: '男',
    age: 30
  }
})
// 监听单个
/** 
watch(count, (newVal, oldVal) => {
  console.log(newVal, oldVal)
})
watch(user, (newVal, oldVal) => {
  console.log(newVal.info.age, oldVal.info.age)
})
*/
// 监听多个
// 参数1：要监听模型的数组，它的值也是一个数组
// watch([count, user], (newVal, oldVal) => {
//   console.log(newVal, oldVal)
// })
// 单独监听对象中的某个属性
// watch(
//   () => user.name,
//   (newVal, oldVal) => {
//     console.log(newVal, oldVal)
//   }
// )
// 深度监听
/**
 * 参数1：监听源
 * 参数2：回调函数
 * 参数3：选项：包括深度监听，立即执行
 */
watch(
  () => user.info,
  (newVal, oldVal) => {
    // console.log(newVal, oldVal)
  },
  {
    deep: true, // 深度监听
    immediate: true // 立即执行
  }
)
</script>

<template>
  <div class="">
    <p>count is {{ count }}</p>
  </div>
</template>

<style scoped></style>
